<template>
	<view class="container">
		<view class="setting-list">
			<view class="setting-item" @click="show=true">
				<view class="setting-item-label">
					押金类型
				</view>
				<view class="setting-item-value">
					<!-- <u-input placeholder="押金类型" v-model="form.deposit_type" inputAlign="right" border="none"> </u-input> -->
					{{depositTypeMap[form.deposit_type] || '请选择押金类型'}}
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-item-label">
					需要抄表
				</view>
				<view class="setting-item-value">
					<u-switch slot="right" v-model="form.need_cb" activeColor="#FE4F04" size="18" activeValue="1"
						inactiveValue="0"></u-switch>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-item-label">
					统一交租日
				</view>
				<view class="setting-item-value">
					<u-switch slot="right" v-model="form.rent_day_switch" activeColor="#FE4F04" size="18"
						activeValue="1" inactiveValue="0"></u-switch>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-item-label">
					交租日
				</view>
				<view class="setting-item-value">
					<u-input v-model="form.rent_day" inputAlign="right" border="none" placeholder="请输入交租日">
						<template slot="suffix">号</template>
					</u-input>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-item-label">
					提前
				</view>
				<view class="setting-item-value">
					<u-input v-model="form.ahead_day" inputAlign="right" border="none" placeholder="请输入提前交租天数">
						<template slot="suffix">天交租</template>
					</u-input>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-item-label">
					短信通知
				</view>
				<view class="setting-item-value">
					<u-switch slot="right" v-model="form.sms_notice" activeColor="#FE4F04" size="18" activeValue="1"
						inactiveValue="0"></u-switch>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-item-label">
					备份邮箱
				</view>
				<view class="setting-item-value">
					<u-input v-model="form.backup_email" inputAlign="right" border="none"
						placeholder="请输入您要备份的邮箱"></u-input>
				</view>
			</view>
			<view class="setting-item" @click="showBackUpTime=true">
				<view class="setting-item-label">
					备份时间
				</view>
				<view class="setting-item-value">
					{{backupTimeMap[form.backup_time] || '请选择备份时间'}}
				</view>
			</view>
		</view>

		<view class="tips">
			关注欢迎词：租客关注公众号时显示
		</view>
		<view class="tips-input">
			<u--textarea v-model="form.welcome" placeholder="请输入备注" inputAlign="right" border="none" maxlength="-1" />
		</view>

		<view class="form-bottom-opt">
			<u-button @click="submit" :custom-style="submitBtnStyle">提交</u-button>
		</view>

		<u-picker :show="show" :columns="depositTypeList" keyName="label" @confirm="confirm" @cancel="show=false"
			confirmColor="#FE4F04"></u-picker>
		<u-picker :show="showBackUpTime" :columns="backupTimeList" keyName="label" @confirm="confirmBackUpTime"
			@cancel="showBackUpTime=false" confirmColor="#FE4F04"></u-picker>
	</view>
</template>

<script>
	import {
		getUserConfigGeneral,
		setUserConfigGeneral,
		getDepositType
	} from '@/api/part2.js'
	export default {
		data() {
			return {
				form: {
					deposit_type: '', // 押金类型
					need_cb: '0', // 需要抄表
					rent_day_switch: '0', //统一交租日
					rent_day: '', //交租日
					ahead_day: '', // 提前X天交租
					sms_notice: '0', //短信通知
					welcome: '', //关注欢迎词
					backup_email: '', //备份邮箱
					backup_time: '', //备份时间
				},
				show: false,
				depositTypeMap: {},
				depositTypeList: [],
				showBackUpTime: false,
				backupTimeMap: {
					// 1每天、2每周、3每月、4每年
					'1': '每天',
					'2': '每周',
					'3': '每月',
					'4': '每年',
				},
				backupTimeList: [
					[{
						id: '1',
						label: '每天'
					}, {
						id: '2',
						label: '每周'
					}, {
						id: '3',
						label: '每月'
					}, {
						id: '4',
						label: '每年'
					}]
				],
				submitBtnStyle: {
					background: "#FE4F04",
					boShadow: "0rpx 4rpx 8rpx 0rpx rgba(254,79,4,0.5)",
					borderRadius: "44rpx",
					fontSize: "30rpx",
					color: "#FFFFFF",
					height: "88rpx",
				},
			}
		},
		onLoad() {
			this.getDepositType()
			this.getUserConfigGeneral()
		},
		methods: {
			getDepositType() {
				getDepositType().then(res => {
					let data = res.data.data
					this.depositTypeMap = data
					let depositTypeList = []
					for (const key in data) {
						console.log("押金类型：", key, data[key]);
						depositTypeList.push({
							id: key,
							label: data[key]
						})
					}
					console.log("押金类型：", depositTypeList);
					this.depositTypeList.push(depositTypeList)
				})
			},
			confirm(value) {
				console.log(value)
				this.form.deposit_type = value.value[0].id
				this.show = false
			},
			confirmBackUpTime(value) {
				console.log(value)
				this.form.backup_time = value.value[0].id
				this.showBackUpTime = false
			},
			getUserConfigGeneral() {
				getUserConfigGeneral().then(res => {
					console.log('通用设置：', res)
					let data = res.data.data
					data.forEach(d => {
						console.log(d)
						this.form[d.field] = d.value || this.form[d.field]
					})
				})
			},
			submit() {
				setUserConfigGeneral(this.form).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	view {
		box-sizing: border-box;
	}

	.container {
		padding: 12rpx 0;
	}

	.setting-list {
		.setting-item {
			width: 750rpx;
			height: 112rpx;
			background: #FFFFFF;
			margin-bottom: 2rpx;
			padding: 36rpx 40rpx;

			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;

			.setting-item-label {

				color: #666666;
			}

			.setting-item-value {
				font-size: 28rpx;
				color: #000000;
			}
		}
	}

	.tips {
		margin-top: 28rpx;
		padding: 20rpx 48rpx;
		font-size: 26rpx;
		color: #2A0C00;
		font-weight: 700;
	}

	.tips-input {
		background-color: #fff;
		// padding: 18rpx 22rpx;
	}

	/deep/.u-textarea {
		padding: 36rpx 40rpx !important;
		font-size: 28rpx !important;
		color: #000 !important;
	}

	.form-bottom-opt {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		/* 关键样式 - 使用 constant 和 env 兼容不同设备 */
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		/* 其他样式按需添加 */
		background-color: #F5F6FA;
		padding: 20rpx 40rpx;
	}
</style>